<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="<%=basePath%>admin/sell/order/">

<title>发货-->分配产品</title>
<script language="javascript" src="<%=basePath%>admin/sell/js/jquery-1.3.1.min.js"></script> 
<script language="javascript" src="<%=basePath%>admin/sell/js/jquery.blockUI.js"></script>
<!-- 
<script language="javascript" src="admin/sell/js/jquery.min.js"></script>  
<script language="javascript" src="admin/sell/js/jquery.form.js"></script>
 -->
<!--进度条js -->
<script type="text/javascript" src="<%=basePath%>admin/sell/js/jquery.progressbar.min.js"></script>
<script>
    $(document).ready(function() {
        $("#spaceused1").progressBar(0);//按默认设置初始化一个进度条
    });
</script>

<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
.STYLE1 {font-size: 12px}
.STYLE4 {
	font-size: 12px;
	color: #1F4A65;
	font-weight: bold;
}

a:link {
	font-size: 12px;
	color: #06482a;
	text-decoration: none;

}
a:visited {
	font-size: 12px;
	color: #06482a;
	text-decoration: none;
}
a:hover {
	font-size: 12px;
	color: #FF0000;
	text-decoration: underline;
}
a:active {
	font-size: 12px;
	color: #FF0000;
	text-decoration: none;
}
.STYLE7 {font-size: 12}

-->
</style>
<style type="text/css">
#test td,#test + tr td{

}
.product,#box{
display:none;
}

</style>

<script>
var  highlightcolor='#eafcd5';
//此处clickcolor只能用win系统颜色代码才能成功,如果用#xxxxxx的代码就不行,还没搞清楚为什么:(
var  clickcolor='#51b2f6';
function  changeto(){
	source=event.srcElement;
	if  (source.tagName=="TR"||source.tagName=="TABLE")
	return;
	while(source.tagName!="TD")
	source=source.parentElement;
	source=source.parentElement;
	cs  =  source.children;
	//alert(cs.length);
	if  (cs[1].style.backgroundColor!=highlightcolor&&source.id!="nc"&&cs[1].style.backgroundColor!=clickcolor)
	for(i=0;i<cs.length;i++){
		cs[i].style.backgroundColor=highlightcolor;
	}
}

function  changeback(){
	if  (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="nc")
	return
	if  (event.toElement!=source&&cs[1].style.backgroundColor!=clickcolor)
	//source.style.backgroundColor=originalcolor
	for(i=0;i<cs.length;i++){
		cs[i].style.backgroundColor="";
	}
}

function  clickto(){
	source=event.srcElement;
	if  (source.tagName=="TR"||source.tagName=="TABLE")
	return;
	while(source.tagName!="TD")
	source=source.parentElement;
	source=source.parentElement;
	cs  =  source.children;
	//alert(cs.length);
	if  (cs[1].style.backgroundColor!=clickcolor&&source.id!="nc")
	for(i=0;i<cs.length;i++){
		cs[i].style.backgroundColor=clickcolor;
	}
	else
	for(i=0;i<cs.length;i++){
		cs[i].style.backgroundColor="";
	}
}

function show(){
 $("#p").removeClass("product");
}

function next(){
  //$('#spaceused1').progressBar(50);
  //setTimeout('window.open("DeliveryStep2.jsp","_self")',1000);
  window.location = "DeliveryStep2.jsp";
}
 var flag = 1;
function add(){
  var text =  $("#text1").val();
  var des;
  if(flag==1) {des = text; flag = 0;}
  else {des = $("#box textarea").val()+","+text;}
  $("#box textarea").attr("value",des);
  $("#text1").attr("value","");
}
var id;//记录orderItem的id传到action中 
$(function(){
	$(".select_add").click(function(){   //给box_btn绑定一个鼠标点击的事件
		id = $(this).attr("id");
	    $.blockUI({    //当点击事件发生时调用弹出层
	             message: $('#box'),    //要弹出的元素box
	             css: {    //弹出元素的CSS属性
	                 top: '50%',
	                 left: '50%',
	                 textAlign: 'left',
	                 marginLeft: '-180px',
	                 marginTop: '-145px',
	                 width: 'auto',
	                 background: 'none'
	            }
	        });
	    //$('.blockOverlay').attr('title','单击关闭').click($.unblockUI);   //遮罩层属性的设置以及当鼠标单击遮罩层可以关闭弹出层
	    $('.close').click($.unblockUI);  //也可以自定义一个关闭按钮来关闭弹出层
	});
	//下一步：显示和个table来选车、人、设备……
	$(".showTableButton").click(function() {
		$(".showTable").css("display","block");
	});
	//异步提交表单数据
	$(".submitButton").click(function() {
		var text = $("#formTextarea").val();
		$.ajax({
			type:"post",
			url: "deliveryTo",
			data:"orderItem.id="+id+"&goodNumbers="+text,
			success: function(msg){
		    	//alert(  msg );
				$("#"+id+" > .undo").css("display","none");
			    $("."+id).css("display","block");
		    }
		});
		$("#box textarea").attr("value","");
		flag = 1;
	});
});
</script>
</head>

<body>
<div id="box" style="border: 3px solid green;background-color: white">
	<form class="numberForm" action="deliveryTo" method="post">
		 <table border="0" >
			 <tr>
			 	 <td align="right">产品编号：
			 	 </td>
				 <td>
					 <input type="text" id="text1"/>
					 <input type="button" value="添加" onclick="add();"/>
				 </td>
			 <tr>
				 <td align="right"> 产品编号：</td>
				 <td>
				 	<textarea id="formTextarea" name="goodNumbers" style="height: 62px;width: 236px;resize:none;" ></textarea>
				 </td>
			 </tr>
			 <tr>
				 <td colspan="2" align="center">
					 <input class="submitButton" type="button" value="提交"/>&nbsp;
					 <input type="button" value="关闭" class="close"/>
				 </td>
			 </tr>
		 </table>
	</form> 
</div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15" height="30"><img src="<%=basePath%>admin/tab/images/tab_03.gif" width="15" height="30" /></td>
        <td width="1101" background="<%=basePath%>admin/tab/images/tab_05.gif"><img src="<%=basePath%>admin/tab/images/001.gif" width="16" height="16" /> <span class="STYLE4">发货 → 选择产品</span></td>
        <td width="281" background="<%=basePath%>admin/tab/images/tab_05.gif">&nbsp;</td>
        <td width="14"><img src="<%=basePath%>admin/tab/images/tab_07.gif" width="14" height="30" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="9" background="<%=basePath%>admin/tab/images/tab_12.gif">&nbsp;</td>
        <td bgcolor="#f3ffe3" class="STYLE1">
		<table width="99%" border="0" align="center" cellpadding="0" cellspacing="1"  onmouseover="changeto()"  onmouseout="changeback()">
		<!-- 添加内容 -->
		<tr>
  			<td  colspan="4" height="32"><div class="head-link">
  		&nbsp;&nbsp;<a href="#" onClick="history.back(); return false;">返回订单列表</a> </div></td>
  		<!--    <td>完成度:</td>
           <td><span class="progressBar" id="spaceused1">0%</span></td>
        --> 
  		</tr>
  		<tr  id="test"> 
	  		<td>
	  		 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="showcontent">
				<tr>
					<td bgcolor="#f3ffe3">
						<table width="60%" border="0" align="center" cellpadding="0"
							cellspacing="1" bgcolor="#c0de98" onmouseover="changeto()" onmouseout="changeback()">
							<tr>
								<td width="8%" height="18" class="STYLE1" bgcolor="#c0de98" colspan="4">
									订单编号：${order.id }
								</td>
							</tr>
							<tr>
								<td width="8%" height="18" background="<%=basePath%>admin/tab/images/tab_14.gif" class="STYLE1">
									<div align="center" class="STYLE2 STYLE1">产品名称</div>
								</td>
								<td width="15%" height="18" background="<%=basePath%>admin/tab/images/tab_14.gif" class="STYLE1">
									<div align="center" class="STYLE2">产品规格</div>
								</td>
								<td width="15%" height="18" background="<%=basePath%>admin/tab/images/tab_14.gif" class="STYLE1">
									<div align="center" class="STYLE2 STYLE1">数量</div>		
								</td>
								<td width="20%" height="18" background="<%=basePath%>admin/tab/images/tab_14.gif" class="STYLE1">
									<div align="center" class="STYLE2">选择产品</div>
								</td>
							</tr>
						<c:forEach items="${orderItem}" var="item">
							<tr>
								<td height="18" bgcolor="#FFFFFF" class="STYLE2">
									<div align="center" class="STYLE2 STYLE1">${item.goodsName } </div>
								</td>
								<td height="18" bgcolor="#FFFFFF">
									<div align="center" class="STYLE2 STYLE1">${item.goodsSpecification } </div>
								</td>
								<td height="18" bgcolor="#FFFFFF">
									<div align="center" class="STYLE2 STYLE1">${item.number }</div>
								</td>
								<td height="18" bgcolor="#FFFFFF">
									<div align="center">
										<a href="#" onclick="return false;" id="${item.id }" class="select_add">
											<b class="undo">发货</b>
										</a>
											<b class="${item.id }" style="display: none;">已发货</b>
									</div>
								</td>
							</tr>
						</c:forEach>
						</table>
					</td>
				</tr>
			</table>
		</td>
  	</tr>
	<tr>
  		<td align="center" colspan="8" height="41"><input type="button" value="下一步" class="showTableButton"/></td>
  	</tr>
	</table>
	<form action="todelivery" method="post">
		<table class="showTable" style="display: none;" width="60%" border="0" align="center" cellpadding="0" cellspacing="1"  onmouseover="changeto()"  onmouseout="changeback()">
			<!-- 添加内容 -->
			<tr>
	  			<td  colspan="2" height="32">&nbsp;&nbsp;
	  				<input type="hidden" name="order.id" value="${order.id }"/>
	  			</td>
	  		</tr>
	  		<tr >
	  		  	<td align="right" width="15%">发货时间：</td>
	  			<td width="13%" ><input name="delivery.time" type="text" size="20"/></td>
	  		</tr>
	  		<tr >
	  		  	<td align="right" width="15%">驾驶人员：</td>
	  			<td width="13%" ><input name="drname" type="text" size="20"/></td>
	  		</tr>
	  		<tr>
	  		  	<td align="right" width="15%">上下货人员：</td>
	  			<td ><input name="udname" type="text" size="20"/></td>
	  		</tr>
	  		<tr>
	  		  	<td align="right" width="15%">车辆：</td>
	  			<td ><input name="vehicle.name" type="text" size="20"/></td>
	  		</tr>
			<tr>
	  			<td align="center" colspan="2" height="41">	
	  				<input type="submit" value="完成" />
	  			</td>
	  		</tr>
		</table>
	</form>
	</td>
		<td width="9" background="<%=basePath%>admin/tab/images/tab_16.gif">&nbsp;</td>
	</tr>
	</table>
	</td>
  </tr>
  <tr>
    <td height="29"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15" height="29"><img src="<%=basePath%>admin/tab/images/tab_20.gif" width="15" height="29" /></td>
        <td background="<%=basePath%>admin/tab/images/tab_21.gif"><div align="right">&nbsp;</div></td>
        <td width="14"><img src="<%=basePath%>admin/tab/images/tab_22.gif" width="14" height="29" /></td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>